import React, { PureComponent, memo } from 'react';

// Header   //memo里的函数组件 只有props改变时 才会重新渲染
const MemoHeader = memo(function Header() {
  console.log("Header被调用");
  return <h2>我是Header组件</h2>
})

// Main
class Banner extends PureComponent {
  render() {
    console.log("Banner render函数被调用");
    return <h3>我是Banner组件</h3>
  }
}

function ProductList() {
  console.log("ProductList被调用");
  return (
    <ul>
      <li>商品列表1</li>
      <li>商品列表2</li>
      <li>商品列表3</li>
      <li>商品列表4</li>
      <li>商品列表5</li>
    </ul>
  )
}

//使用 PureComponent 会做一个浅层比较  因为它里面没有依赖任何 props/state 所以不需要render函数的调用
class Main extends PureComponent {
  render() {
    console.log("Main render函数被调用");
    return (
      <div style={{border: '1px solid #ccc'}}>
        <Banner/>
        <ProductList/>
      </div>
    )
  }
}

// Footer
const MemoFooter = memo(function Footer() {
  console.log("Footer被调用");
  return <h2>我是Footer组件</h2>
})

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  render() {
    console.log("App render函数被调用");
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
        {/* <Header/> */}
        <MemoHeader />
        <Main/>
        {/* <Footer/> */}
        <MemoFooter />
      </div>
    )
  }

//这里 只通过setState 就会调用App的render函数 然后render函数又会调用所包含的组件紧接着组件的render也会被调用 导致了一个性能浪费
  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}
